<template>
   <div class="xiao"> 消息</div>
   <el-input class="suo" v-model="input" style="width: 500px" placeholder="搜索聊天记录/联系人/服务号" />
   <hr>
   
   <div class="avatar-container">
 <img class="imgs" src="/public/images/deng.png" alt="">
<p class="wen">通知消息</p>
<span>【订阅消息】宝贝擦亮提醒</span>
<p class="zi">刚刚</p>
  </div>
  <div class="avatar-container">
 <img class="imgs" src="/public/images/zan.png" alt="">
<p class="wen">互动消息</p>
<span>a***d给您留言了</span>
<p class="zi2">11-08</p>
  </div>
  <div class="avatar-container">
 <img class="imgs" src="/public/images/xin.png" alt="">
<p class="wen">小鱼精选</p>
<span>你附近有贺卡明信片降价啦</span>
<p class="zi3">一天前</p>
  </div>
  <div class="avatar-container">
 <img class="imgs" src="/public/images/yan.png" alt="">
<p class="wen">关注上新</p>
<span>发布了全新衣服</span>
<p class="zi2">2小时前</p>
  </div>
  <div class="avatar-container">
 <img class="imgs" src="/public/images/xiao.png" alt="">
<p class="wen">卖家小助手</p>
<span>发布了全新衣服</span>
<p class="zi2">4小时前</p>
  </div>

  <!--  -->
  <div class="avatar-container">
 <img class="imgs" src="/public/images/zyb.jpg" alt="">
<p class="we">ahfkjha</p>
<span>现在还有货哦</span>
<p class="ziz">1分钟前</p>
<img class="imgss" src="/public/images/che.jpg" alt="">
  </div>
  <div class="avatar-container">
 <img class="imgs" src="/public/images/zyb1.jpg" alt="">
<p class="we">ahfkjha</p>
<span>现在还有货哦</span>
<p class="ziz">1分钟前</p>
<img class="imgss" src="/public/images/che.jpg" alt="">
  </div>
  <div class="avatar-container">
 <img class="imgs" src="/public/images/zyb2.jpg" alt="">
<p class="we">ahfkjha</p>
<span>现在还有货哦</span>
<p class="ziz">1分钟前</p>
<img class="imgss" src="/public/images/che.jpg" alt="">
  </div>
  <div class="avatar-container">
 <img class="imgs" src="/public/images/zyb3.jpg" alt="">
<p class="we">ahfkjha</p>
<span>现在还有货哦</span>
<p class="ziz">1分钟前</p>
<img class="imgss" src="/public/images/che.jpg" alt="">
  </div>
</template>
<script setup>
import { ref } from 'vue'
const input = ref('')
</script>
<style scoped>
.xiao{
    font-size: 30px;
    color: dodgerblue;
    margin-left: 120px;
}
.suo{
    margin-left: 80px;
    margin-top: 20px;
}

/*  */
.avatar-container {
    border-bottom: 1px solid rgb(155, 142, 142); 
  width: 1000px; /* 设置容器宽度 */
  height: 100px; /* 设置容器高度 */
  display: flex;
  margin-top: 20px;
  margin-left: 50px;
}
.imgs {
  width: 70px; /* 设置头像宽度 */
  height: 70px; /* 设置头像高度 */
  margin-left: 20px;
  margin-top: 20px;
}
.wen{
  margin-left: 10px;
  margin-top: 20px;
  font-size: 20px;
}
.zi{
  margin-left: -170px;
  margin-top: 70px;
  font-size: 10px;
  color: darkgrey;
}
.avatar-container span{
  margin-left: -85px;
  margin-top: 45px;
  font-size: 15px;
  color: darkgrey;
}
.zi2{
    margin-left: -100px;
    margin-top: 65px;
  font-size: 10px;
  color: darkgrey;
}
.zi3{
    margin-left: -170px;
    margin-top: 65px;
  font-size: 10px;
  color: darkgrey;
}
.ziz{
    margin-left: -90px;
    margin-top: 65px;
  font-size: 10px;
  color: darkgrey;
}
.we{
    margin-left:35px;
  margin-top: 20px;
  font-size: 20px;
}
.imgss{
    margin-left:700px;
    width: 100px;
    margin-top: -10px;
    height: 100px;
}
</style>